<template>
  <div class="table">
    <el-table :data='tableData'
              id='table'
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              size='small'
              :height='clientHeight'>
      <slot />
    </el-table>
    <div id='pagination'>
      <v-pagination :total='total'
                    ref='pagination'
                    v-if='total'
                    :page.sync='page'
                    @pagination='$emit("pagination")' />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      page: 0,
      clientHeight: 0
    }
  },
  watch: {
    page (e) {
      this.$emit('update:page', e)
    },
    pageSize (e) {
      this.$emit('update:limit', e)
    },
    total () {
      this.elementHandler()
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  methods: {
    elementHandler () {  //计算出table所用高度
      this.$nextTick(() => {
        let { top } = document.querySelector('#table').getBoundingClientRect()
        let { height } = document.querySelector('#pagination') ? document.querySelector('#pagination').getBoundingClientRect() : { height: 0 }
        this.clientHeight = document.documentElement.clientHeight - top - height
    
      })
    }
  },
  mounted () {
    window.addEventListener('resize', this.elementHandler)
  }
}
</script>

<style scoped>
#table {
  padding: 5px 5px;
}
</style>
